<main>
  <swiper
    #swiperVirtualRef
    [slidesPerView]="3"
    [spaceBetween]="50"
    [pagination]="{ type: 'fraction' }"
    virtual
    [centeredSlides]="true"
    navigation
  >
    <ng-container *ngFor="let slide of virtualSlides; index as i">
      <ng-template swiperSlide>Slide {{ slide }}</ng-template>
    </ng-container>
    <ng-template swiperSlide>Slide</ng-template>
    <ng-template swiperSlide>Slide</ng-template>
  </swiper>
  <swiper
    #swiperRef
    [navigation]="navigation"
    (swiper)="log('swiper')"
    (slideChange)="log('slideChange')"
    [slidesPerView]="3"
    [spaceBetween]="50"
    [breakpoints]="breakpoints"
    [scrollbar]="scrollbar"
    [loop]="true"
    [(index)]="indexNumber"
    [pagination]="{ type: 'fraction' }"
  >
    <ng-template swiperSlide>Best slide ever 1</ng-template>
    <ng-template swiperSlide>Best slide ever 2</ng-template>
    <ng-template swiperSlide>Best slide ever 3</ng-template>
    <ng-container *ngFor="let slide of slides; index as i">
      <ng-template swiperSlide let-data>
        {{ slide }} / active: {{ data.isActive }} / next: {{ data.isNext }}</ng-template
      >
    </ng-container>
  </swiper>
  <swiper [config]="exampleConfig">
    <ng-template swiperSlide>Best slide ever 2</ng-template>
    <ng-template swiperSlide>Best slide ever 2</ng-template>
    <ng-template swiperSlide>Best slide ever 2</ng-template>
    <ng-template swiperSlide>Best slide ever 2</ng-template>
    <ng-template swiperSlide>Best slide ever 2</ng-template>
  </swiper>
  <button (click)="togglePagination()">Toggle pagination</button>
  <button (click)="toggleNavigation()">Toggle navigation</button>
  <button (click)="toggleScrollbar()">Toggle scrollbar</button>
  <button (click)="breakpointChange()">Breakpoint change</button>

  <button (click)="indexNumber = 0">0</button>
  <button (click)="indexNumber = 3">3</button>
  <button (click)="indexNumber = 5">5</button>
  <button (click)="indexNumber = 6">6</button>
  {{ indexNumber }}
  <button (click)="exampleConfig = { slidesPerView: 2 }">changeConfig</button>

  {{ exampleConfig | json }}
</main>
